<script>
import {
  defineComponent,
  reactive,
  toRefs,
  ref,
  createVNode,
  nextTick,
} from "vue";
import {
  EyeOutlined,
  EllipsisOutlined,
  EyeInvisibleOutlined,
  ExclamationCircleOutlined,
} from "@ant-design/icons-vue";
import request from "../../../common/utils/request";
import { message, Modal, Empty, notification } from "ant-design-vue";
import tagsModal from "./modules/tagsModal.vue";
import store from "@/store/index.js";
import { useRouter, useRoute } from "vue-router";
import { debounce } from "lodash";

// 充值弹窗
import vipModal from '@/socialMedia/Vip/vipModal.vue'
export default defineComponent({
  name: "FileList",
  components: {
    EyeOutlined,
    EllipsisOutlined,
    EyeInvisibleOutlined,
    Empty,
    tagsModal,
    vipModal,
    store

  },
  props: {
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  emits: [
    "downloadFille",
    "fileDetail",
    "checkedChange",
    "changeSuccess",
    "refrash",
  ],
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      tagVisible: false,
      tagtype: "file",
      merchant_folder_statck_id_new: "",
      iconData: {
        image: "icon-tupian11",
        audio: "icon-yuyin",
        text: "icon-zhinengwenan",
        video: "icon-shipin",
      },
    });
    const vipVisible = ref(false)

    const closeTags = () => {
      state.tagVisible = false;
    };
    const router = useRouter();
    const route = useRoute();
    //文件夹添加标签
    const AddTip = (item) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
       vipVisible.value = true
      } else {
        state.merchant_folder_statck_id_new = item.id;

        state.tagVisible = true;
      }

    };

    const canViewClick = (item) => {
      if (item.folder_type == "text") {
        message.warn("文案文件夹，不可设置项目可见");
        return;
      }
      if (item.folder_type == "audio") {
        message.warn("音频文件夹，不可设置项目可见");
        return;
      }
      let params = {
        id: item.id,
        folder_name: item.folder_name,
        folder_type: item.folder_type,
        merchant_can_view: item.merchant_can_view ? 0 : 1,
      };
      request.put("/work_ai", "/user/shotstack/folder", params).then((res) => {
        message.success(
          `修改成功！${item.folder_name}文件夹对项目${item.merchant_can_view ? "不可见" : "可见"
          }`
        );
        emit("changeSuccess");
      });
    };

    const inputRefs = ref(null);
    const editNameInput = (item, index) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true
      } else {
        nextTick(() => {
          setTimeout(() => {
            inputRefs.value[index].focus();
          }, 5);
        });
        item.isInput = true;
      }

    };

    const blurChange = (item) => {
      let params = {
        id: item.id,
        folder_name: item.folder_name,
        folder_type: item.folder_type,
        merchant_can_view: item.merchant_can_view,
      };
      if (!item.folder_name) {
        message.warn("请输入名称");
        return;
      }
      if (item.folder_name.length > 10) {
        message.error("文件夹名称不能超过10个字符");
        return;
      }

      request.put("/work_ai", "/user/shotstack/folder", params).then((res) => {
        message.success("修改成功");
        item.isInput = false;
        emit("changeSuccess");
      });
    };

    const downloadFilles = (item) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true
      } else {
        if (item.folder_type == "text") {
          message.warn("文案类型文件不支持下载");
          return;
        }
        emit("downloadFille", item);
      }

    };

    const deleteFille = (item) => {
      if (store.getters.isVersionExpired) {
        notification.warn({ message: "您的套餐已到期", duration: 2 });
        vipVisible.value = true
      } else {
        Modal.confirm({
          title: `确定删除 ${item.folder_name} 么？`,
          icon: createVNode(ExclamationCircleOutlined),
          cancelText: "取消",
          okText: "确定",
          onOk() {
            let params = {
              merchant_library_id: item.merchant_library_id,
            };
            if (item.folder_type == "text") {
              params.textFolderIds = [item.id];
            } else {
              params.mediaFolderIds = [item.id];
            }
            request
              .del("/work_ai", "/user/shotstack/folder", params)
              .then((res) => {
                // 删除文件夹后, 清空素材文件夹的id的回显id
                store.commit("videoMixCut/SET_FOLDER_IDS", {
                  merchant_library_id: null,
                  merchant_folder_statck_id: null,
                  group_id: null,
                });
                message.success("删除成功!");
                emit("changeSuccess");
              });
          },
        });
      }


    };

   const debounceddeleteFille = debounce(deleteFille, 1000, {
      leading: true,
      trailing: false,
    });

    const fileDetail = (item) => {
      emit("fileDetail", item);
    };

    const checkedChange = () => {
      emit("checkedChange");
    };

    return {
      ...toRefs(state),
      editNameInput,
      vipVisible,
      downloadFilles,
      deleteFille,
      blurChange,
      fileDetail,
      checkedChange,
      canViewClick,
      AddTip,
      closeTags,
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
      inputRefs,
      debounceddeleteFille
    };
  },
});
</script>

<template>
  <a-row class="file-list" v-if="list.length">
    <a-col class="file-item" v-for="(item, index) in list" :key="item.key" :style="{
      background:
        item.checkedValue && item.is_can_delete !== 1 ? '#edf5fe' : '',
    }">
      <a-row justify="space-between" class="functional-area" :style="{
        display: item.checkedValue ? 'flex' : '',
      }">
        <a-col>
          <a-checkbox v-if="item.is_can_delete !== 1" v-model:checked="item.checkedValue" @change="checkedChange" />
        </a-col>
        <a-col class="preview-menu">
          <!-- <div>
            <eye-outlined
              class="icon-style"
              v-if="item.merchant_can_view"
              @click="canViewClick(item)"
            />
            <eye-invisible-outlined
              class="icon-style"
              v-else
              @click="canViewClick(item)"
            />
          </div> -->
          <div>
            <a-popover placement="right">
              <template #content>
                <div>
                  <a-button type="text" @click="editNameInput(item, index)">编辑名称</a-button>
                </div>
                <div>
                  <a-button type="text" style="width: 90px; text-align: left"
                    @click="downloadFilles(item)">下载</a-button>
                </div>
                <div>
                  <a-button type="text" style="width: 90px; text-align: left" 
                  
                  @click="debounceddeleteFille(item)">删除</a-button>
                </div>

                <div>
                  <a-button v-if="item.folder_type !== 'text' && item.statck_multimedias_count !== 0" type="text" style="width: 90px; text-align: left"
                    @click="AddTip(item)">添加标签</a-button>
                </div>
              </template>
              <ellipsis-outlined class="icon-style" style="font-size: 18px" v-if="item.is_can_delete !== 1" />
            </a-popover>
          </div>
        </a-col>
      </a-row>
      <div class="file-content hide-scroller-bar">
        <div class="icon-content">
          <cu-icon class="icon" type="icon-wenjianjia1" style="font-size: 60px; cursor: pointer"
            @click="fileDetail(item)" />
          <cu-icon class="icon icon-postion" :type="iconData[item.folder_type]" @click="fileDetail(item)" />
          <a-badge :count="item.folder_type == 'text'
            ? item.statck_texts_count
            : item.statck_multimedias_count
            " class="badge" style="background: rgba(0, 0, 0, 0.2)" />
        </div>

        <div>
          <a-input ref="inputRefs" v-show="item.isInput" v-model:value="item.folder_name"
            style="width: 80px; height: 20px; text-align: center" @blur="blurChange(item)" />
          <span v-show="!item.isInput">{{ item.folder_name }}</span>
        </div>
      </div>
    </a-col>
  </a-row>
  <a-empty :image="simpleImage" v-else />

  <tagsModal :merchant_folder_statck_id="merchant_folder_statck_id_new" :tagtype="tagtype" :visible="tagVisible"
    @close="closeTags" />
      <!-- 充值弹窗 -->
  <vipModal :visible="vipVisible" @close="vipVisible = false"></vipModal>

</template>



<style lang="less" scoped>
.file-list {
  margin-top: 10px;

  .file-item {
    width: 120px;
    height: 130px;
    border-radius: 5px;
    margin-right: 10px;
    margin-bottom: 10px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;

    .functional-area {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 5px;

      .preview-menu {
        height: 16px;
        padding: 2px;
        margin-top: 2px;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #d0d0d0;

        .icon-style {
          cursor: pointer;

          &:hover {
            color: #0076ff;
          }
        }
      }

      display: none;
    }

    &:hover {
      // background: #f2f2f2;
      background: #f2f2f2;

      .functional-area {
        display: flex;
      }
    }

    .file-content {
      width: 100%;
      height: 85px;
      overflow: auto;

      .icon-content {
        position: relative;

        .badge {
          position: absolute;
          top: 0px;
          right: 25px;
          background: rgba(0, 0, 0, 0.2);
          border-radius: 50%;
          color: #fff;
        }

        .icon-postion {
          position: absolute;
          top: 23px;
          left: 50px;
          font-size: 22px;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
